<template>
  <div class="body">
    <div class="header">
			<div class="title" @click="back()">
				<div class="title-h">
					<div class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>
					</div>
					<div class="txt-h">
						消息
					</div>					 
				</div>				
			</div>			
		</div>
		<div class="content_panel">
			<div class="about">
				关于我们
			</div>
			<div class="message-box" @click="login()">
				登录其他账户
			</div>			
			<div class="message-box" @click="logout()">
				退出登录
			</div>
		</div>
  </div>
</template>
<script>
export default {
  name: "SettingView",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    back() {
        this.$router.push("/personal");
    },
    login() {
        this.$router.push("/login");
    },
    logout() {
      //登录注销
      // 清除状态保持
      window.localStorage.clear();
      // 状态保持清除后刷新页面
      window.location.reload();
    },
  },
};
</script>
<style scoped>
.body{
	background-color: #f5f5f5;
    height: 100vh;
}

/* 顶部搜索栏 */
.header {	
	/* background-color: #1678ff; */
	color: #333333;
	width: 100%;
}

.header .title{
	font-size: 18px;
	margin-left: 20px;
	padding: 20px 0;
}

.title-h{
	display: flex;
	flex-direction: row;
	vertical-align: middle;
	align-items: center;
}

.title-h .icon{
	width: 30px;
	height: 30px;
}

/* 内容 */
.content_panel{
	padding: 10px;
}

.about{
	background-color: #fff;
	border-radius: 10px;
	padding: 10px 10px 20px 10px;
	margin-bottom: 10px;
	font-size: 18px;
	color: #333333;
}

.message-box{
	background-color: #fff;
	border-radius: 10px;
	padding: 10px 10px 20px 10px;
	margin-bottom: 10px;
	font-size: 18px;
	color: #333333;
	text-align: center;
}
</style>